<template>
  <!-- 垂直堆叠组件，并设置组件之间的间距，设置高度为视口的 100% -->
  <n-space vertical size="large" style="height: 100vh;">
    <!-- 带侧边栏的布局组件 -->
    <n-layout has-sider>
      <!-- 具有可定制属性的侧边栏 -->
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="0"
        :width="220"
        show-trigger="bar"
        bordered
        v-model:collapsed="isCollapsed"
        style="background-color: #393d49; position: relative; z-index: 1;"
      >
        <!-- 包含菜单的 div，自动处理溢出 -->
        <div style="height: 100vh; overflow: auto;">
          <!-- 自定义菜单组件，使用树形结构数据进行管理 -->
          <lay-menu
            :selected-key="selectedMenuKey"
            @change-selected-key="handleMenuSelection"
            @change-open-keys="handleOpenKeysChange"
            v-model:openKeys="openMenuKeys"
            :tree="true"
          >
            <!-- 菜单项和子菜单 -->
            <lay-sub-menu id="B1">
              <template #title>1</template>
              <!-- PDF链接 -->
              <lay-menu-item id="B2" @click="navigateToPdf('')">1.1</lay-menu-item>
              <!-- 组件名称 -->
              <lay-menu-item id="B3" @click="navigateTo('')">1.2</lay-menu-item>
            </lay-sub-menu>
            <lay-sub-menu id="C1">
              <template #title>2</template>
              <!-- PDF链接 -->
              <lay-menu-item id="C2" @click="navigateToPdf('')">2.1</lay-menu-item>
              <!-- 组件名称 -->
              <lay-menu-item id="C3" @click="navigateTo('')">2.2</lay-menu-item>
            </lay-sub-menu>
          </lay-menu>
        </div>
      </n-layout-sider>

      <!-- 主内容区，左侧留空以适应侧边栏 -->
      <n-layout-content style="height: 100vh; padding-left: 25px;">
        <!-- 根据 currentComponent 动态显示的组件 -->
        <component :is="currentComponent" v-if="currentComponent !== 'Pdf'"></component>
        <!-- 如果 currentComponent 是 Pdf，则显示 Pdf 组件 -->
        <Pdf v-else :pdfUrl="pdfUrl" />
      </n-layout-content>
    </n-layout>
  </n-space>
</template>

<script>
// 引入 Vue 的 ref 函数，用于创建响应式变量
import { ref } from 'vue'; 
// 引入 Pdf 组件
import Pdf from '../views/Pdf.vue';

export default {
  setup() {
    // 定义一个响应式的菜单打开状态
    const openMenuKeys = ref(["7"]);
    // 定义一个响应式的选中菜单项
    const selectedMenuKey = ref("B3");
    // 定义一个响应式的侧边栏折叠状态
    const isCollapsed = ref(true);
    // 默认显示的组件名称
    const currentComponent = ref('');   
    // 定义一个响应式的 PDF URL
    const pdfUrl = ref('');

    // 导航到指定组件
    const navigateTo = (componentName) => {
      currentComponent.value = componentName;
    };

    // 导航到 PDF 视图
    const navigateToPdf = (url) => {
      pdfUrl.value = url;
      currentComponent.value = 'Pdf';
    };

    // 处理菜单选择事件
    const handleMenuSelection = (key) => {
      selectedMenuKey.value = key;
    };

    // 处理菜单展开状态变化事件
    const handleOpenKeysChange = (keys) => {
      openMenuKeys.value = keys;
    };

    // 返回 setup 函数中定义的变量和方法
    return {
      openMenuKeys,
      selectedMenuKey,
      isCollapsed,
      currentComponent,
      pdfUrl,
      navigateTo,
      navigateToPdf,
      handleMenuSelection,
      handleOpenKeysChange,
    };
  },
  
  components: {
    // 注册 Pdf 组件
    Pdf,
  },
};
</script>